<template>
  <view class="container">
    <!-- <view class="header">
      <text class="app-title">AI He</text>
      <view class="header-actions">
        <view class="action-item">
          <text class="iconfont icon-history">⏱</text>
        </view>
        <view class="action-item">
          <text class="iconfont icon-user">👤</text>
        </view>
      </view>
    </view> -->
    
    <view class="content-container">
      <!-- <view class="tabs-container">
        <view class="tab active">
          <text>素材上传</text>
        </view>
        <view class="tab">
          <text>历史记录</text>
        </view>
      </view> -->
      
      <view class="main-title-container">
        <text class="main-title">鞋模大师</text>
        <text class="subtitle">打造专业鞋模摄影</text>
        <view class="tags-container">
          <view class="tag"><text class="tag-icon">📷</text> 物品摄影</view>
          <view class="tag"><text class="tag-icon">👣</text> 模特产品展示</view>
        </view>
      </view>
      
      <!-- <view class="progress-container">
        <view class="steps-count">1/7</view>
        <view class="progress-bar">
          <view class="progress-inner" style="width: 14%;"></view>
        </view>
      </view> -->
      
      <view class="upload-panel">
        <!-- <view class="upload-title">
          <text>输入参数</text>
          <view class="help-button">?</view>
        </view> -->
        
        <view class="upload-column">
          <view class="upload-card">
            <view class="card-label">上传姿势图</view>
            <view class="upload-area" @click="chooseImage('pose')" :class="{'has-image': poseImage}">
              <template v-if="poseImage">
                <image :src="poseImage" mode="aspectFill" class="preview-image"></image>
                <view class="image-overlay">
                  <view class="edit-button">编辑</view>
                </view>
                <view class="delete-button" @click.stop="deleteImage('pose')">
                  <text class="delete-icon">×</text>
                </view>
              </template>
              <template v-else>
                <view class="upload-icon">
                  <text class="icon-plus">+</text>
                </view>
                <text class="upload-text">上传姿势图</text>
                <text class="upload-desc">穿鞋姿势</text>
              </template>
            </view>
          </view>
          
          <view class="upload-card">
            <view class="card-label">上传鞋子图</view>
            <view class="upload-area" @click="chooseImage('shoe')" :class="{'has-image': shoeImage}">
              <template v-if="shoeImage">
                <image :src="shoeImage" mode="aspectFill" class="preview-image"></image>
                <view class="image-overlay">
                  <view class="edit-button">编辑</view>
                </view>
                <view class="delete-button" @click.stop="deleteImage('shoe')">
                  <text class="delete-icon">×</text>
                </view>
              </template>
              <template v-else>
                <view class="upload-icon">
                  <text class="icon-plus">+</text>
                </view>
                <text class="upload-text">添加产品图片</text>
                <text class="upload-desc">透明背景最佳</text>
              </template>
            </view>
          </view>
        </view>
        
        <!-- <view class="parameter-container">
          <view class="parameter-row" @click="toggleAdvanced">
            <view class="parameter-header">
              <text class="parameter-title">高级参数设置</text>
              <text class="toggle-icon">{{ showAdvanced ? '▲' : '▼' }}</text>
            </view>
            
            <view class="advanced-options" v-if="showAdvanced">
              <view class="option-group">
                <text class="option-title">背景设置</text>
                <view class="option-row">
                  <view class="option-item" 
                        v-for="(bg, index) in backgrounds" 
                        :key="index"
                        :class="{'selected': selectedBackground === index}"
                        @click.stop="selectBackground(index)">
                    <view class="color-preview" :style="{backgroundColor: bg.color}"></view>
                    <text class="option-name">{{bg.name}}</text>
                  </view>
                </view>
              </view>
              
              <view class="option-group">
                <text class="option-title">构图样式</text>
                <view class="option-row">
                  <view class="option-item" 
                        v-for="(style, index) in styles" 
                        :key="index"
                        :class="{'selected': selectedStyle === index}"
                        @click.stop="selectStyle(index)">
                    <text class="style-icon">{{style.icon}}</text>
                    <text class="option-name">{{style.name}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view> -->
        
        <view class="tips-container">
          <view class="tip-item">
            <view class="tip-icon">i</view>
            <text class="tip-text">上传一张穿鞋姿势，上传一张底图干净的鞋子照片，建议45度俯视角，点击生成即可</text>
          </view>
          <!-- <view class="tip-item">
            <view class="tip-icon">i</view>
            <text class="tip-text">产品图片建议使用透明背景(PNG格式)</text>
          </view>
		  <view class="tip-item">
            <view class="tip-icon">i</view>
            <text class="tip-text">产品图片建议使用透明背景(PNG格式)</text>
          </view> -->
        </view>
      </view>
    </view>

    <!-- 结果展示区域 -->
    <view class="result-section" v-if="resultImage">
      <view class="result-header">
        <text class="result-title">生成结果</text>
        <view class="result-actions">
          <view class="action-button" @click="regenerateImage">
            <text class="action-button-icon"><i class="icon-refresh"></i></text>
            <text class="action-button-text">重新生成</text>
          </view>
          <view class="action-button" @click="downloadImage">
            <text class="action-button-icon"><i class="icon-download"></i></text>
            <text class="action-button-text">下载</text>
          </view>
        </view>
      </view>
      
      <view class="result-preview">
        <image :src="resultImage" mode="aspectFit" class="result-image"></image>
        <view class="result-overlay" @click="previewImage">
          <view class="zoom-button">
            <view class="tech-zoom-icon"></view>
          </view>
        </view>
      </view>
      
      <view class="result-footer">
        <text class="result-info">鞋模大师 · 专业鞋模摄影</text>
        <view class="share-button" @click="shareImage">
          <view class="share-icon-container">
            <view class="tech-share-icon"></view>
          </view>
          <text class="share-text">分享</text>
        </view>
      </view>
    </view>

    <view class="bottom-bar">
      <view class="action-group">
        <view class="action-circle">
          <text class="action-icon">⋮</text>
        </view>
        <view class="action-circle">
          <text class="action-icon">♡</text>
        </view>
      </view>
      <button 
        class="run-button" 
        :class="{'button-active': poseImage || shoeImage}"
        :disabled="!poseImage && !shoeImage"
        @click="handleRun">
        运行
      </button>
    </view>

    <view class="api-settings">
      <view class="api-title">
        <text>API 设置</text>
        <view class="api-help" @click="showApiHelp">?</view>
      </view>
      <view class="api-info">
        <text>已使用配置文件中的API Key</text>
        <text class="api-key-info">{{ maskApiKey(apiKey) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import runningHubService from '../../utils/runningHubService.js';

export default {
  data() {
    return {
      poseImage: '', // 姿势图的路径
      shoeImage: '', // 鞋子图的路径
      showAdvanced: false, // 是否显示高级参数
      selectedBackground: 0, // 选中的背景
      selectedStyle: 0, // 选中的样式
      resultImage: '', // 结果图片的路径
      apiKey: '', // RunningHub API KEY
      workflowId: '1906290641859432449', // 指定的工作流ID
      taskId: '', // 当前任务ID
      statusTimer: null, // 状态查询定时器
      poseBatchPoints: {}, // 姿势图的位置信息
      shoeBatchPoints: {}, // 鞋子图的位置信息
      backgrounds: [
        { name: '纯白', color: '#FFFFFF' },
        { name: '渐变', color: '#F5F5F5' },
        { name: '工作室', color: '#EEEEEE' },
        { name: '户外', color: '#E0E0E0' }
      ],
      styles: [
        { name: '正面', icon: '◼' },
        { name: '侧面', icon: '▣' },
        { name: '底部', icon: '▤' },
        { name: '特写', icon: '▥' }
      ],
	  workflow:""
    };
  },
  onLoad() {
    // 从服务实例获取默认API KEY
    this.apiKey = runningHubService.getApiKey();
    console.log('使用配置文件中的API KEY:', this.maskApiKey(this.apiKey));
    
    // 初始化需要获取工作流信息以找到正确的节点ID
    this.initWorkflowInfo();
  },
  methods: {
    // 初始化工作流信息
    async initWorkflowInfo() {
      if (!this.apiKey) return;
      
      try {
        // 获取工作流信息，找到上传图片的节点ID
        const workflowInfo = await runningHubService.getWorkflowJson(this.workflowId);
        console.log('工作流信息:', workflowInfo);
		console.log(JSON.parse(workflowInfo.data.prompt) );
		this.workflow = JSON.parse(workflowInfo.data.prompt);
        // 在这里可以分析工作流信息，找到正确的姿势图和鞋子图上传节点
        // 实际应用中需要根据工作流的具体情况来设置
        // 这里假设我们已经找到了正确的节点ID
        this.poseBatchPoints = {
          nodeId: '69', // 替换为实际的节点ID
          fieldName: 'image' // 替换为实际的字段名
        };
        
        this.shoeBatchPoints = {
          nodeId: '68', // 替换为实际的节点ID
          fieldName: 'image' // 替换为实际的字段名
        };
      } catch (error) {
        console.error('获取工作流信息失败:', error);
      }
    },
    
    // 选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          if (type === 'pose') {
            this.poseImage = tempFilePath;
          } else if (type === 'shoe') {
            this.shoeImage = tempFilePath;
          }
          // 添加振动反馈
          if (uni.vibrateShort) {
            uni.vibrateShort();
          }
        }
      });
    },
    
    // 删除图片
    deleteImage(type) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张图片吗？',
        confirmColor: '#FF3B30',
        success: (res) => {
          if (res.confirm) {
            if (type === 'pose') {
              this.poseImage = '';
            } else if (type === 'shoe') {
              this.shoeImage = '';
            }
            // 添加振动反馈
            if (uni.vibrateShort) {
              uni.vibrateShort();
            }
          }
        }
      });
    },
    
    // 点击运行
    handleRun() {
      if (!this.poseImage && !this.shoeImage) {
        uni.showToast({
          title: '请至少上传一张图片',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '正在生成中...'
      });
      
      // 准备上传图片
      const uploadTasks = [];
      
      if (this.poseImage) {
        uploadTasks.push(runningHubService.uploadImage(this.poseImage));
      }
      
      if (this.shoeImage) {
        uploadTasks.push(runningHubService.uploadImage(this.shoeImage));
      }
      
      // 等待所有图片上传完成
      Promise.all(uploadTasks)
        .then(uploadResults => {
          console.log('图片上传成功:', uploadResults);
          
          // 构建nodeInfoList
          const nodeInfoList = [];
          
          if (this.poseImage && uploadResults[0]) {
            nodeInfoList.push({
              nodeId: this.poseBatchPoints.nodeId,
              fieldName: this.poseBatchPoints.fieldName,
              fieldValue: uploadResults[0].fileName,
			  
            });
			this.workflow[69].inputs.image = uploadResults[0].fileName;
          }
          
          if (this.shoeImage && uploadResults[this.poseImage ? 1 : 0]) {
            nodeInfoList.push({
              nodeId: this.shoeBatchPoints.nodeId,
              fieldName: this.shoeBatchPoints.fieldName,
              fieldValue: uploadResults[this.poseImage ? 1 : 0].fileName
            });
			this.workflow[68].inputs.image = uploadResults[this.poseImage ? 1 : 0].fileName;
          }
          
          console.log('创建任务的节点信息:', nodeInfoList);
          
          // 调用工作流创建任务
          return runningHubService.createComfyUITask(this.workflowId, nodeInfoList,JSON.stringify(this.workflow) );
        })
        .then(taskResult => {
          console.log('任务创建成功:', taskResult);
          this.taskId = taskResult.data.taskId;
          
          // 定时查询任务状态
          this.startStatusCheck();
        })
        .catch(error => {
          console.error('处理失败:', error);
          uni.hideLoading();
          uni.showToast({
            title: '生成失败，请重试',
            icon: 'none'
          });
        });
    },
    
    // 开始查询任务状态
    startStatusCheck() {
      if (!this.taskId) return;
      
      // 清除可能存在的定时器
      if (this.statusTimer) {
        clearInterval(this.statusTimer);
      }
      
      const checkInterval = 3000; // 每3秒检查一次
      const maxCheckTimes = 240; // 最多检查60次（3分钟）
      let checkCount = 0;
      
      this.statusTimer = setInterval(() => {
        checkCount++;
        
        if (checkCount > maxCheckTimes) {
          clearInterval(this.statusTimer);
          this.statusTimer = null;
          uni.hideLoading();
          uni.showToast({
            title: '生成超时，请重试',
            icon: 'none'
          });
          return;
        }
        
        runningHubService.queryTaskStatus(this.taskId)
          .then(res => {
            console.log('任务状态:', res);
            const status = res.data;
            
            // 任务完成
            if (status === 'SUCCESS') {
              clearInterval(this.statusTimer);
              this.statusTimer = null;
              // 查询任务结果
              this.fetchTaskResult();
            } 
            // 任务失败
            else if (status === 'FAILED') {
              clearInterval(this.statusTimer);
              this.statusTimer = null;
              uni.hideLoading();
              uni.showToast({
                title: '生成失败，请重试',
                icon: 'none'
              });
            }
            // 其他状态继续等待
          })
          .catch(error => {
            console.error('查询状态失败:', error);
          });
      }, checkInterval);
    },
    
    // 获取任务结果
    fetchTaskResult() {
      if (!this.taskId) return;
      
      runningHubService.getTaskResult(this.taskId)
        .then(res => {
          uni.hideLoading();
          console.log('任务结果:', res);
          
          if (res.data && res.data.length > 0) {
            // 获取结果图片URL
            const resultImageUrl = res.data[0].fileUrl;
            this.resultImage = resultImageUrl;
            
            uni.showToast({
              title: '生成成功',
              icon: 'success'
            });
            
            // 滚动到结果区域
            setTimeout(() => {
              uni.pageScrollTo({
                scrollTop: 500,
                duration: 300
              });
            }, 300);
          } else {
            uni.showToast({
              title: '获取结果失败',
              icon: 'none'
            });
          }
        })
        .catch(error => {
          uni.hideLoading();
          console.error('获取结果失败:', error);
          uni.showToast({
            title: '获取结果失败',
            icon: 'none'
          });
        });
    },
    
    // 重新生成
    regenerateImage() {
      this.handleRun();
    },
    
    // 下载
    downloadImage() {
      if (!this.resultImage) return;
      
      uni.showToast({
        title: '开始下载',
        icon: 'none'
      });
      
      // 下载图片到本地临时文件
      uni.downloadFile({
        url: this.resultImage,
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存到相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 预览
    previewImage() {
      if (!this.resultImage) return;
      
      uni.previewImage({
        urls: [this.resultImage],
        current: this.resultImage
      });
    },
    
    // 分享
    shareImage() {
      if (!this.resultImage) return;
      
      uni.showShareMenu({
        withShareTicket: true,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 切换高级参数
    toggleAdvanced() {
      this.showAdvanced = !this.showAdvanced;
    },
    
    // 选择背景
    selectBackground(index) {
      this.selectedBackground = index;
    },
    
    // 选择样式
    selectStyle(index) {
      this.selectedStyle = index;
    },

    // 显示API帮助
    showApiHelp() {
      // 实现显示API帮助的逻辑
    },

    // 掩码API Key
    maskApiKey(key) {
      // 实现掩码API Key的逻辑
    }
  }
};
</script>

<style>
page {
  background-color: #f8f9fd;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 容器样式 */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(135deg, #f8f9fd 0%, #eef1f8 100%);
}

/* 顶部导航区域 */
.header {
  padding: 60rpx 40rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #EEEEEE;
}

.app-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-item {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #666666;
}

/* 内容区域 */
.content-container {
  flex: 1;
  padding: 30rpx 30rpx 150rpx;
  background-color: transparent;
}

.tabs-container {
  display: flex;
  margin-bottom: 30rpx;
  border-bottom: 1px solid #EEEEEE;
}

.tab {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #999999;
  position: relative;
}

.tab.active {
  color: #333333;
  font-weight: 600;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #333333;
}

.main-title-container {
  margin-bottom: 40rpx;
  padding: 30rpx;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6eeff 100%);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(100, 120, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.main-title {
  font-size: 44rpx;
  font-weight: 700;
  color: #2c3e67;
  margin-bottom: 16rpx;
  position: relative;
  display: inline-block;
}

.main-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6rpx;
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #4e7df9 0%, #6a5cf7 100%);
}

.subtitle {
  font-size: 26rpx;
  color: #5a6a8a;
  margin-bottom: 20rpx;
  display: block;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24rpx;
}

.tag {
  font-size: 24rpx;
  color: #5a6a8a;
  padding: 10rpx 24rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 245, 255, 0.9) 100%);
  border-radius: 30rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(100, 120, 255, 0.08);
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.tag-icon {
  margin-right: 8rpx;
  font-size: 22rpx;
}

.progress-container {
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
}

.steps-count {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-right: 20rpx;
  min-width: 60rpx;
}

.progress-bar {
  flex: 1;
  height: 10rpx;
  background-color: #F0F0F0;
  border-radius: 5rpx;
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  background-color: #333333;
  border-radius: 5rpx;
}

.upload-panel {
  background-color: transparent;
  border-radius: 20rpx;
  padding: 0;
  margin-top: 10rpx;
}

.upload-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.upload-title text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.help-button {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: #EEEEEE;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #999999;
}

.upload-column {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
  margin-bottom: 40rpx;
}

.upload-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 20rpx rgba(100, 120, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.upload-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 3rpx;
  background: linear-gradient(90deg, transparent, rgba(100, 120, 255, 0.3));
}

.upload-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3rpx;
  background: linear-gradient(90deg, rgba(100, 120, 255, 0.3), transparent);
}

.card-label {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  text-align: center;
  color: #2c3e67;
  position: relative;
  display: inline-block;
}

.card-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6rpx;
  width: 40rpx;
  height: 2rpx;
  background: linear-gradient(90deg, #4e7df9, #6a5cf7);
  transform: translateX(-50%);
}

.upload-area {
  background: linear-gradient(135deg, #ffffff 0%, #f9faff 100%);
  border: 2rpx dashed #c8d4f9;
  border-radius: 16rpx;
  height: 300rpx;
  width: 300rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: inset 0 2rpx 8rpx rgba(100, 120, 255, 0.05);
}

.upload-area:not(.has-image)::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 6s infinite;
  opacity: 0.4;
}

.upload-area.has-image {
  border-style: solid;
  border-color: #d8e1fc;
  box-shadow: 0 4rpx 16rpx rgba(100, 120, 255, 0.1);
}

.upload-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0e8ff 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(100, 120, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.upload-icon::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.2;
}

.icon-plus {
  font-size: 50rpx;
  color: #5e7bf7;
  font-weight: 300;
}

.upload-text {
  font-size: 28rpx;
  color: #2c3e67;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.upload-desc {
  font-size: 24rpx;
  color: #5a6a8a;
}

.preview-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.upload-area:active .image-overlay {
  opacity: 1;
}

.edit-button {
  background-color: #FFFFFF;
  color: #333333;
  padding: 12rpx 36rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.delete-button {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.delete-icon {
  color: #333333;
  font-size: 34rpx;
  line-height: 1;
}

.parameter-container {
  margin-bottom: 30rpx;
}

.parameter-row {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
}

.parameter-header {
  padding: 24rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #F5F5F5;
}

.parameter-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
}

.toggle-icon {
  font-size: 24rpx;
  color: #999999;
}

.advanced-options {
  padding: 20rpx 0;
}

.option-group {
  margin-bottom: 24rpx;
}

.option-title {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  padding: 16rpx 0;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.option-item.selected {
  background-color: #F5F5F5;
}

.color-preview {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  border: 1px solid #EEEEEE;
  margin-bottom: 10rpx;
}

.style-icon {
  font-size: 36rpx;
  margin-bottom: 10rpx;
  color: #666666;
}

.option-name {
  font-size: 22rpx;
  color: #666666;
}

.tips-container {
  background: linear-gradient(135deg, rgba(240, 245, 255, 0.8) 0%, rgba(230, 238, 255, 0.8) 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(100, 120, 255, 0.08);
  margin-top: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.tips-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%235e7bf7' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  position: relative;
  z-index: 1;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #5a6a8a;
  margin-right: 16rpx;
  margin-top: 2rpx;
  box-shadow: 0 2rpx 6rpx rgba(100, 120, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.tip-text {
  flex: 1;
  font-size: 24rpx;
  color: #5a6a8a;
  line-height: 1.5;
}

/* 底部操作区域 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(217, 225, 255, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-group {
  display: flex;
  gap: 20rpx;
}

.action-circle {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
  background: linear-gradient(135deg, #f7f9ff 0%, #edf1fd 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 8rpx rgba(100, 120, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.action-circle::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.2;
}

.action-icon {
  font-size: 32rpx;
  color: #5a6a8a;
}

.run-button {
  width: 65%;
  height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f0f2f9 0%, #e8ecf7 100%);
  color: #8e9bbd;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(100, 120, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.run-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button-active {
  background: linear-gradient(135deg, #4e7df9 0%, #6a5cf7 100%);
  color: #FFFFFF;
  box-shadow: 0 6rpx 16rpx rgba(78, 125, 249, 0.3);
  border: none;
}

.button-active::before {
  opacity: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-150%) rotate(45deg);
  }
  100% {
    transform: translateX(150%) rotate(45deg);
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 125, 249, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(78, 125, 249, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 125, 249, 0); }
}

.button-active:not([disabled]) {
  animation: pulse 2s infinite;
}

.upload-area, .parameter-row, .run-button {
  animation: fadeIn 0.6s ease;
}

/* 添加一个微妙的点击效果 */
.upload-card:active, .run-button:active:not([disabled]), .option-item:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

/* 结果展示区域 */
.result-section {
  margin: 30rpx 30rpx 120rpx;
  padding: 30rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 245, 255, 0.95) 100%);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(100, 120, 255, 0.12);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  animation: slideUp 0.5s ease;
  position: relative;
  overflow: hidden;
}

.result-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3rpx;
  background: linear-gradient(90deg, transparent, #4e7df9, #6a5cf7, transparent);
  z-index: 1;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e67;
}

.result-actions {
  display: flex;
  gap: 20rpx;
}

.action-button {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  box-shadow: 0 4rpx 8rpx rgba(100, 120, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-button::before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  background: linear-gradient(45deg, #4e7df9, transparent, #6a5cf7, transparent);
  border-radius: 40rpx;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-button:active {
  transform: scale(0.95);
}

.action-button:active::before {
  opacity: 1;
}

.action-button-icon {
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: rgba(94, 123, 247, 0.1);
  position: relative;
}

.action-button-icon .icon-refresh {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #5e7bf7;
  border-radius: 50%;
  border-right-color: transparent;
  position: relative;
  transform-origin: center;
  animation: spin 10s linear infinite;
}

.action-button-icon .icon-refresh::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -4rpx;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4rpx 0 4rpx 5rpx;
  border-color: transparent transparent transparent #5e7bf7;
  transform: translateY(-50%) rotate(-45deg);
}

.action-button:hover .icon-refresh {
  animation: spin 1.5s linear infinite;
}

.action-button-icon .icon-download {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  position: relative;
}

.action-button-icon .icon-download::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 14rpx;
  width: 2rpx;
  background-color: #5e7bf7;
  transform: translateX(-50%);
}

.action-button-icon .icon-download::after {
  content: '';
  position: absolute;
  top: 10rpx;
  left: 50%;
  width: 10rpx;
  height: 10rpx;
  border: 2rpx solid #5e7bf7;
  border-top: none;
  border-left: none;
  transform: translateX(-50%) rotate(45deg);
}

.action-button:hover .icon-download::before,
.action-button:hover .icon-download::after {
  animation: download 1s infinite;
}

.action-button-text {
  font-size: 24rpx;
  color: #5a6a8a;
  font-weight: 500;
  letter-spacing: 0.5rpx;
}

.result-preview {
  width: 100%;
  height: 500rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 20rpx 0;
  background: linear-gradient(135deg, #f0f4ff 0%, #e6eeff 100%);
  box-shadow: 0 4rpx 16rpx rgba(100, 120, 255, 0.1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.result-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.result-preview:active .result-image {
  transform: scale(1.02);
}

.result-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.result-preview:active .result-overlay {
  opacity: 1;
}

.zoom-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 245, 255, 0.9) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.zoom-button::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.2;
}

.tech-zoom-icon {
  position: relative;
  width: 26rpx;
  height: 26rpx;
  border: 2rpx solid #5e7bf7;
  border-radius: 50%;
}

.tech-zoom-icon::before {
  content: '';
  position: absolute;
  right: -8rpx;
  bottom: -2rpx;
  width: 10rpx;
  height: 2rpx;
  background: #5e7bf7;
  transform: rotate(45deg);
  transform-origin: right center;
}

.tech-zoom-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8rpx;
  height: 8rpx;
  background: rgba(94, 123, 247, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-small 2s infinite;
}

@keyframes pulse-small {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.2; }
}

.result-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(217, 225, 255, 0.5);
  padding-top: 20rpx;
}

.result-info {
  font-size: 24rpx;
  color: #5a6a8a;
}

.share-button {
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #4e7df9 0%, #6a5cf7 100%);
  box-shadow: 0 4rpx 12rpx rgba(78, 125, 249, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.share-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

.share-button:active {
  transform: scale(0.95);
}

.share-icon-container {
  margin-right: 10rpx;
  width: 32rpx;
  height: 32rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-share-icon {
  position: relative;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #FFFFFF;
}

.tech-share-icon::before,
.tech-share-icon::after {
  content: '';
  position: absolute;
  width: 16rpx;
  height: 2rpx;
  background: #FFFFFF;
}

.tech-share-icon::before {
  top: -6rpx;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

.tech-share-icon::after {
  bottom: -6rpx;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.share-text {
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: 500;
}

/* 通用动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes download {
  0% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }
  50% {
    transform: translateX(-50%) translateY(2rpx) rotate(45deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }
}
</style>
